<template>
  <div class="my">
    <el-row>
      <!-- active-text-color="#ffd04b"  background-color="#545c64"  -->
      <el-col :span="4" style="padding-right: 10px" accordion>
        <el-collapse v-model="activeNames">
          <el-collapse-item class="collapse-title" title="我是买家" name="1">
            <el-space :size="10" style="width: 100%; padding: 10px 0 0 16px; box-sizing: border-box" direction="vertical" :fill="true">
              <el-space :size="10">
                <span class="iconfont icon-cart"></span>
                <span class="sp_1" @click="toCart">我的购物车</span>
              </el-space>
              <el-space :size="10">
                <span class="iconfont icon-dingdan"></span>
                <span class="sp_1">我的订单</span>
              </el-space>
              <el-space :size="10">
                <span class="iconfont icon-liwu"></span>
                <span class="sp_1" :style="{ color: isWhat == 2 ? 'red' : '#000' }" @click="isWhat = 2">我收藏的商品</span>
              </el-space>
              <el-space :size="10">
                <span class="iconfont icon-dizhi"></span>
                <span class="sp_1" :style="{ color: isWhat == 1 ? 'red' : '#000' }" @click="isWhat = 1">我的收货地址</span>
              </el-space>
            </el-space>
          </el-collapse-item>
          <el-collapse-item class="collapse-title" title="账户安全管理" name="2">
            <el-space :size="10" style="width: 100%; padding: 10px 0 0 16px; box-sizing: border-box" direction="vertical" :fill="true">
              <el-space>
                <span class="sp_1" :style="{ color: isWhat == 0 ? 'red' : '#000' }" @click="isWhat = 0">个人资料</span>
              </el-space>
              <el-space>
                <span class="sp_1">修改登陆密码</span>
              </el-space>
              <el-space>
                <span class="sp_1">修改绑定手机</span>
              </el-space>
              <el-space>
                <span class="sp_1">绑定邮箱</span>
              </el-space>
            </el-space>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <!-- 个人资料 -->
      <el-col v-if="isWhat === 0" :span="20">
        <el-space style="width: 100%">
          <div class="img">
            <el-image style="width: 110px; height: 100px" src="https://user.kfzimg.com/user/member_pic/?v=1659620760" :fit="fill"></el-image>
          </div>
          <el-space :size="2" style="width: 100%; height: 110px" direction="vertical" :fill="true">
            <h2>{{ phone }}</h2>
            <el-space :size="10">
              <span class="iconfont icon-duihao"></span>
              <span>已绑定手机</span>
              <!-- <el-link>修改绑定手机</el-link> -->
            </el-space>
            <!-- <el-space :size="10">
              <span class="iconfont icon-duihao"></span>
              <span>已绑定手机</span>
              <el-link>修改绑定手机</el-link>
            </el-space> -->
            <!-- <el-space> 上次登录时间：2022-08-04 15:32:32 （如果上次不是您登录的，请 联系客服 ）</el-space> -->
          </el-space>
        </el-space>
        <!-- <div class="my_main">
          <p>交易提醒</p>
        </div>
        <div class="main_my1">
          <el-space :size="10">
            <span style="font-size: 12px; font-weight: 700">店铺订单:</span>
            <span style="color: #666; font-size: 12px">待确认(0)</span>
            <span style="color: #666; font-size: 12px"> 待付款(0)</span>
            <span style="color: #666; font-size: 12px">待发货(0)</span>
            <span style="color: #666; font-size: 12px">待确认收货(0)</span>
            <span style="color: #666; font-size: 12px">退货/退款(0)</span>
            <span style="color: #666; font-size: 12px">评价(0)</span>
          </el-space>
        </div> -->
      </el-col>
      <!-- 收货地址 -->
      <el-col v-if="isWhat === 1" :span="20">
        <el-space style="width: 100%" :wrap="true">
          <el-card shadow="hover" style="width: 240px; height: 120px" v-for="i in addressLists" :key="i.id">
            <el-space direction="vertical" style="width: 100%" :fill="true">
              <el-space style="width: 100%; margin-bottom: 6px" :fill="true">
                <el-row justify="center">
                  <el-col :span="6" style="padding-top: 4px">
                    <span>{{ i.realName }}</span>
                  </el-col>
                  <el-col :span="11" :offset="7">
                    <el-button size="small" @click="setDefault(i.id)" :type="i.isDe">{{ i.text_1 }}</el-button>
                  </el-col>
                </el-row>
              </el-space>
              <span>{{ i.province }} {{ i.district }} {{ i.city }} {{ i.detail }}</span>
              <div style="display: flex; justify-content: space-between">
                <span>{{ i.phone }}</span>
                <el-button @click="delAddress(i.id)" size="small" type="danger">删除</el-button>
              </div>
            </el-space>
          </el-card>

          <el-card shadow="hover" style="width: 240px; height: 120px" @click="toAddress">
            <el-icon style="height: 100%; width: 100%; text-algin: center" :size="60"><Plus /></el-icon>
          </el-card>
        </el-space>
      </el-col>
      <!-- 我的收藏 -->
      <el-col v-if="isWhat === 2" :span="20">
        <el-table :data="collectionLists" style="width: 100%" ref="ref">
          <el-table-column label="商品" width="380">
            <template #default="scope">
              <el-space>
                <el-image :src="scope.row.image" style="width: 100px"></el-image>
                <span>{{ scope.row.storeName }}</span>
              </el-space>
            </template>
          </el-table-column>
          <el-table-column prop="vipPrice" label="单价" width="280" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-space :size="6">
                <!-- <el-link :underline="false" @click="collection(scope.row)">移入收藏</el-link> -->
                <el-link :underline="false" @click="del(scope.row)">取消收藏</el-link>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>

  <!-- 引入添加地址弹窗 -->
  <Address v-model:visible="visible" @done="done" />
</template>

<script>
import Address from '@/components/addAddress'
import { Plus } from '@element-plus/icons-vue'
export default {
  name: 'my',
  components: {
    Plus,
    Address,
  },
  data() {
    return {
      activeNames: ['1', '2'],
      // 添加地址弹窗
      visible: false,
      // 收货地址列表
      addressLists: [],
      isDefault: 'danger',
      isWhat: 1,
      phone: null,
      collectionLists: [],
      total: 0,
      page: 1,
      limit: 20,
    }
  },
  created() {
    this.getAddressList()
    this.getDefaultAddress()
    if (sessionStorage.getItem('phone')) {
      this.phone = sessionStorage.getItem('phone')
    }
    this.getCollectionLists()
  },
  methods: {
    // 添加地址弹窗
    toAddress() {
      this.visible = true
    },
    // 关闭弹窗
    done() {
      this.visible = false
      this.getAddressList()
    },
    // 获取收货地址列表
    getAddressList() {
      this.$http
        .get('address/list')
        .then((res) => {
          if (res.data.code === 200) {
            this.addressLists = res.data.data.list
            this.addressLists.map((d) => {
              d.isDe = d.isDefault === true ? 'danger' : 'primary'
              d.text_1 = d.isDefault === true ? '默认地址' : '设为默认地址'
              return d
            })
            console.log(this.addressLists)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    // 获取默认地址
    getDefaultAddress() {
      this.$http
        .get('address/default')
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res.data.data)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    // 设置默认地址
    setDefault(id) {
      this.$http
        .post('address/default/set', { id })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getAddressList()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    // 路由跳转购物车
    toCart() {
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        if (this.$route.path === '/cart') return
        let routeUrl = this.$router.resolve({
          path: '/cart',
        })
        window.open(routeUrl.href, '_blank')
      } else {
        this.$message.warning('请先登录')
        this.visible = true
      }
    },
    toOrder() {
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        if (this.$route.path === '/order') return
        let routeUrl = this.$router.resolve({
          path: '/order',
        })
        window.open(routeUrl.href, '_blank')
      } else {
        this.$message.warning('请先登录')
        this.visible = true
      }
    },
    /* 获取收藏列表 */
    getCollectionLists() {
      this.$http
        .get('collect/user', {
          params: {
            limit: 20,
            page: this.page,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res.data.data)
            this.collectionLists = res.data.data.list
            this.total = res.data.data.total
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 取消收藏 */
    del(row) {
      this.$http
        .post('collect/cancel/' + row.productId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getCollectionLists()
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 删除地址 */
    delAddress(id) {
      this.$http
        .post('address/del', {
          id,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getAddressList()
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
  },
}
</script>

<style scoped lang="scss">
.el-menu-vertical {
  border: 1px solid #dcdcdc;
}
:deep(.el-collapse-item__header) {
  background: #c63b40;
  height: 33px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding-left: 10px;
  // flex: 1 0 auto;
  // order: -1;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 6px;
}
.collapse-title {
  // flex: 1 0 90%;
  // order: 1;
  .sp_1 {
    font-size: 14px;
  }
  .sp_1:hover {
    color: #d04245;
    cursor: pointer;
  }
}
.my_main {
  border: 1px solid #dcdcdc;
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  margin-top: 10px;
  p {
    background: #e2edfb;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    height: 100%;
    line-height: 34px;
    padding-left: 10px;
  }
}
.main_my1 {
  height: 74px;
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-top: none;
  box-sizing: border-box;
}
.el-card {
  cursor: pointer;
}
</style>
